<template>
  <div class="problem-index">
    <!-- 搜索栏 -->
    <div  class="search">
      
      <ul>
        <li>
          <el-input placeholder="请输入内容" v-model="params.key" clearable width="200"> 
            <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
          </el-input>
        </li>
        <li >
          <el-select v-model="params.tags" multiple :placeholder="$t('problemMode.tags')" @change="getTableData">
            <el-option
              v-for="item in tags"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </li>
        <li style="width:80px">
          <el-select v-model="params.difficulty" :placeholder="$t('problemMode.difficulty')" @change="getTableData">
            <el-option
              v-for="item in difficulties"
              :key="item.id"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li style="width:120px" v-if="isAdmin()">
          <el-select v-model="params.auth" :placeholder="$t('problemMode.auth.index')" @change="getTableData">
            
            <el-option :label="$t('problemMode.auth.fir')" value="">{{ $t('problemMode.auth.fir') }}</el-option>
            <el-option :label="$t('problemMode.auth.sec')" value="0">{{ $t('problemMode.auth.sec') }}</el-option>
            <el-option :label="$t('problemMode.auth.thi')" value="1">{{ $t('problemMode.auth.thi') }}</el-option>
            <el-option :label="$t('problemMode.auth.fou')" value="2">{{ $t('problemMode.auth.fou') }}</el-option>
          </el-select>
        </li>
      </ul>
      
      

      
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      @sort-change="sortChange"
      >
      <el-table-column :label="$t('select')" width="50" >
        <template slot-scope="scope" >
          
          <el-checkbox v-model="scope.row.checked" @change="select(scope.row,scope.$index)"></el-checkbox>

        </template>
      </el-table-column>


      <el-table-column :label="$t('problemMode.id')" width="120" sortable="custom" prop="code">
        <template slot-scope="scope" >
          
          <router-link :to="'/main/problem/detail/'+scope.row.id" target="_blank">{{ formatterCode(scope.row) }}</router-link>

        </template>
      </el-table-column>
      <el-table-column :label="$t('problemMode.title')" sortable="custom" width="400" prop="title">
        <template slot-scope="scope" >
          
          <router-link :to="'/main/problem/detail/'+scope.row.id" target="_blank">{{ scope.row.title }}</router-link>
        </template>
      </el-table-column>
      <!-- 权限 -->
      <el-table-column v-if="isAdmin()" :label="$t('problemMode.auth.index')"
        :formatter="formatterAuth" width="120" sortable="custom" prop="auth">
      </el-table-column>
      <el-table-column :label="$t('problemMode.tags')"  width="140">
        <template slot-scope="scope" >
          
          <el-tag
            v-for="tag in scope.row.tags"
            :key="tag.id"
            
            type="" :color="tag.color">
            {{tag.name}}
          </el-tag>

        </template>
      </el-table-column>
      <!-- 困难等级 -->
      <el-table-column :label="$t('problemMode.difficulty')" sortable="custom"  width="140" prop="difficulty">
        <template slot-scope="scope" >
          <el-rate
            v-model="scope.row.difficulty"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>

        </template>
      </el-table-column>


    </el-table>
      <!--分页-->
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.size"
        :page-sizes="[10,20,30,50,100]"
        @current-change="chg"
        @size-change="chgsize"
        >
      </el-pagination>
    </div>


  </div>
</template>

<script lang="ts">
import * as problemApi from '@/api/problem'
import { isAdmin } from '@/utils/auth';
export default {
  name: "problemList",
  // props:{
  //   list: {
  //         type: Array,
  //         default: () => []
  //   },
  // },
  props:["list"],
  data() {
      return {
        checkedList:[],
          tags:[],//所有标签
          total:0,
          params: {
              key: "",
              page: 1,
              size: 10,
              field:null,
              order:null,
              tags:[],
          },
          tableData: [],
          difficulties:[  //难度
          {id:"0",name:"不限",value:''},
          {id:"1",name:"1星",value:1},
          {id:"2",name:"2星",value:2},
          {id:"3",name:"3星",value:3},
          {id:"4",name:"4星",value:4},
          {id:"5",name:"5星",value:5}
          ],
          auths:[
            {value:'',name: this.$t('problemMode.auth.fir'),id:0},
            {value:0,name: this.$t('problemMode.auth.sec'),id:1},
            {value:1,name: this.$t('problemMode.auth.thi'),id:2},
            {value:2,name: this.$t('problemMode.auth.fou'),id:3},
          ],
      };
  },
  created() {//console.info("mounted")
      this.$nextTick(() => {
        this.checkedList = this.list;
        this.getTableData();
        this.getAllTags();  
      // for(var i = 0;i<this.tableData.length;i++){
      //   if(this.tableData[i].checked)this.checkedList[i] = this.tableData[i];
      // }
      // // this.list = this.tableData;
      // this.$emit('myValue', this.checkedList)
      })
      

  },
  mounted(){
  },
  watch:{
    list(oldValue,newValue){
      this.checkedList = newValue;
      //this.getTableData();
      this.tableData = this.reloadTable(this.tableData);
      console.info("---"+newValue);
    },
  },
  methods: {

    //选择
    select(data,index){
      if(this.tableData[index].checked){  //选择该题目
        this.checkedList.push(data);
      }else{ //去除题目
        for(var i = 0;i < this.checkedList.length;i++){
          if(this.checkedList[i].id == data.id){
            this.checkedList[i] = this.checkedList[this.checkedList.length-1] //删除最后一个元素，赋值给第 i 个
            this.checkedList.pop();
            break;
          }
        }
      }
      this.$emit('myValue', this.checkedList)
      // console.info("-->"+this.checkedList)
    },
    
    //判断是否为管理员
    isAdmin(){
      // console.info(isAdmin())
      return isAdmin();
    },
    // 获取所有标签
    getAllTags(){
      problemApi.getTagList().then(res=>{
        this.tags = res.data.data;
      })
    },
    // 自定义排序
    sortChange(column,prop,order){
      // console.info(column);
      this.params.field = column.prop;
      this.params.order = column.order;
      if(this.params.order){
        if(this.params.order[0]=='a')this.params.order = "asc";
        else this.params.order = "desc";
      }else{  this.params.order = "";this.params.field = ''}
      // console.info(this.params)
      this.getTableData();
    },
    //每页记录数发生改变时
    chgsize(pgsize) {
      //更改每页记录数
      this.params.size = pgsize;
      //从每一页开始查询 
      this.params.page = 1;
      //重新查询 
      this.getTableData();
    },
    //当页数发生变化时执行
    chg(curpage) {
        //更新查询的页数
        this.params.page = curpage;
        //重新查询 
        this.getTableData();
    },
    /**
     * 题目提交状态重定义输出显示
     * @param row 
     */
    formatterStatus(row) {
      // console.info(row.status)
        if (row.status == -1) {return this.$t("problemMode.status.fir");}
        else if (row.status == 0) {return '<span style="color:#25bb9b;">'+this.$t("problemMode.status.sec")+'</span>';}
        else if (row.status == 1) {return '<span style="color:#ff7a38;">'+this.$t("problemMode.status.thi")+"</span>";}
    },
    formatterAuth(row){
      if(row.auth==0)return this.$t('problemMode.auth.sec');
      else if(row.auth==1)return this.$t('problemMode.auth.thi');
      else if(row.auth==2)return this.$t('problemMode.auth.fou');
      else return "NULL";
    },
    formatterCode(row) {
        // console.info(row,column);
        var res = "" + row.code;
        while (res.length < 4)
            res = "0" + res;
        return "P" + res;
    },
    // 获取题目数据
    getTableData() {
      // console.info(this.params)
        problemApi.getListData(this.params).then(res => {
            // console.info(res);
            if(res.data.code==10000){
              var data = res.data.data.dataList;
              data = this.reloadTable(data);
              this.tableData = data;
              this.total = res.data.data.total;
            }
            
            // console.info(this.tableData);
        });
    },
    //重新刷新check-->tableData
    reloadTable(data){
      for(var i = 0;i<data.length;i++){  //已经选择的题目
        data[i].checked = false;
        for(var j = 0;j<this.checkedList.length;j++){ 
          if(this.checkedList[j].id == data[i].id){
            data[i].checked = true;
            break;
          }
        }
      }
      return data;
    }
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.problem-index{
width: 98%;
/* margin-right: 20px; */
background-color: #ffffff;
border-radius: .1rem;
overflow-y: auto;
box-shadow: 2px 2px 2px 2px #afafafaf;
}
a{
color: #000;
text-decoration: none;
}
.page{
    margin-top: 20px;
    /* text-align: right; */
}
.search > ul > li{
  list-style: none;
  display:inline-block;
  text-align: left;
  width: 15.625rem;
  margin: .625rem;
}
.search > ul{
  /* margin: .625rem; */
  padding: 0px;
  /* margin: 0px; */
  margin-bottom: 20px;
  text-align: left;
  /* width: 55rem; */
}

</style>
